Tapable 源码解析

2024年1月12日

前言

Webpack 是一个非常著名的打包工具，甚至可以被称作为前端的“基石”。那么这样一个工具，它内部的东西非常多，但是它也非常的灵活，特别是插件系统，用户可以通过编写插件，在 Webpack 的不同执行时机去实现一些自定义功能。这个能力，是借助于 Tapable 来实现的。

Tapable 使用方法

Tapable 不需要把它想的多复杂，它其实就是一个发布订阅者的模式。

接下来我们来看看怎么用它，再通过源码去研究下它是怎么实现的

首先我们需要安装 Tapable，这里我们使用 pnpm 去安装

pnpm add tapable

然后，我们就可以在项目中使用它

const { SyncHook } = require("tapable");

// 初始化同步钩子
const hook = new SyncHook(["arg1", "arg2", "arg3"]);

// 注册事件
hook.tap('flag1', (arg1,arg2,arg3) => {
    console.log('flag1:',arg1,arg2,arg3)
})

hook.tap('flag2', (arg1,arg2,arg3) => {
    console.log('flag2:',arg1,arg2,arg3)
})

// 调用事件并传递执行参数
hook.call('lzzzs','abc','cde')

// 打印结果
flag1: lzzzs abc cde
flag2: lzzzs abc cde

这是关于 tapable 最基本的用法。这里我们使用的 SyncHook 这个钩子，关于 tapable 它一共提供了九种钩子

const {
	SyncHook,
	SyncBailHook,
	SyncWaterfallHook,
	SyncLoopHook,
	AsyncParallelHook,
	AsyncParallelBailHook,
	AsyncSeriesHook,
	AsyncSeriesBailHook,
	AsyncSeriesWaterfallHook
 } = require("tapable");

我们可以从两个维度去看钩子的含义

按照同步和异步分类

以 Sync 开头的钩子都是同步钩子，以 Async 开头的钩子都是异步钩子。同步钩子只能通过 tap 去注册事件，并且只能通过 call 调用。但是异步钩子可以通过 tap、tapAsync、tapPromise 去注册事件，同时通过 call、callAsync、promise 去调用。

同时异步钩子还可以进一步划分

串行（Series）：按照顺序调用
并行（Parallel）：并发调用

按照执行机制分类

basic hook

最基本的钩子，它仅只关注注册的事件，不关注被事件函数的返回值。

Waterfall

瀑布类型的钩子，它关注每个事件函数的返回值，前一个事件函数的返回值，会被当作参数传递给下一个事件函数

Bail

保险类型钩子，只要在执行事件函数过程中，有一个函数没有返回 undefined，那么就不会继续执行下去了，也可以说叫熔断

Loop

循环类型钩子，只要有一个事件函数没有返回 undefined，它就会重新执行所有的事件函数，直到所有的事件函数都返回 undefined

拦截器

Tapable 中的所有 Hook 都支持注入拦截器，例如

const hook = new SyncHook(['arg1', 'arg2', 'arg3']);

hook.intercept({
  // 每次调用 hook 实例的 tap() 方法注册回调函数时, 都会调用该方法,
  // 并且接受 tap 作为参数, 还可以对 tap 进行修改;
  register: (tapInfo) => {
    console.log(`${tapInfo.name} is doing its job`);
    return tapInfo; // may return a new tapInfo object
  },
  // 通过hook实例对象上的call方法时候触发拦截器
  call: (arg1, arg2, arg3) => {
    console.log('Starting to calculate routes');
  },
  // 在调用被注册的每一个事件函数之前执行
  tap: (tap) => {
    console.log(tap, 'tap');
  },
  // loop类型钩子中 每个事件函数被调用前触发该拦截器方法
  loop: (...args) => {
    console.log(args, 'loop');
  },
});

Before 和 Stage

在使用 tap 注册事件的时候，第一个参数之前传的都是字符串，其实它可以传入一个对象。

Before

传入 before 字段，可以指定当前事件函数，在指定的事件之前进行执行

const { SyncHook } = require('tapable');

const hooks = new SyncHook();

hooks.tap(
  {
    name: 'flag1',
  },
  () => {
    console.log('This is flag1 function.');
  }
);

hooks.tap(
  {
    name: 'flag2',
    // flag2 事件函数会在flag1之前进行执行
    before: 'flag1',
  },
  () => {
    console.log('This is flag2 function.');
  }
);

hooks.call();

// result
This is flag2 function.
This is flag1 function.

Stage

stage 是一个数字类型，数字越大事件回调执行越晚，支持传入负数，不传时默认为 0。

const hooks = new SyncHook();

hooks.tap(
  {
    name: 'flag1',
    stage: 1,
  },
  () => {
    console.log('This is flag1 function.');
  }
);

hooks.tap(
  {
    name: 'flag2',
    // 默认为stage: 0,
  },
  () => {
    console.log('This is flag2 function.');
  }
);

hooks.call();

// result
This is flag2 function.
This is flag1 function.

如果同时存在 before 和 stage，优先处理 before

Tapable 源码实现

Tapable 的源码仓库在：https://github.com/webpack/tapable

源码的 case 很多，我们重点看 SyncHook 这个钩子的 case，去了解源码内部的大概流程是怎么样的

先看一段和 SyncHook 有关的代码

按照之前看过的发布订阅的套路，应该是执行 tap，将回调函数推入队列，然后执行 call 的时候将队列的函数遍历执行一遍。但是 Tapable 有所区别，在使用 call 执行的时候，执行的其实是一个动态更新的函数代码块，在我们每次调用 call 的时候这个函数体会动态更新，也可以叫做懒执行

例如上面的代码，调用 call 的时候，其实在执行下面这段代码

function fn(arg1, arg2) {
    "use strict";
    var _context;
    var _x = this._x;
    var _fn0 = _x[0];
    _fn0(arg1, arg2);
    var _fn1 = _x[1];
    _fn1(arg1, arg2);
}

从这段代码，看得出从 _x 是一个数组，然后根据下标分别执行 _x 中的函数并且传入参数。这一步就是在调用我们通过 tap 注册的事件函数。

这个代码看起来很死板，但神奇的点就在于，每次执行 call 的时候，函数体的代码就会生成一次，保证满足需求

入口文件

接下来我们根据 SyncHook 这个 hook 从入口文件，一步步看，在下面贴出来的代码，会删减一些无关的 case，让大家把流程看的更清晰。

通过 Tapable 的 package.json，我们可以看到入口文件的位置在 lib/index.js

{
  "main": "lib/index.js",
}

lib/index.js

"use strict";

exports.__esModule = true;
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

可以看出我们使用的 SyncHook 是 lib 下的 SyncHook 导出的

SyncHook.js

lib/SyncHook.js

"use strict";

const Hook = require("./Hook");
const HookCodeFactory = require("./HookCodeFactory");

class SyncHookCodeFactory extends HookCodeFactory {
	content({ onError, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

const factory = new SyncHookCodeFactory();

const TAP_ASYNC = () => {
	throw new Error("tapAsync is not supported on a SyncHook");
};

const TAP_PROMISE = () => {
	throw new Error("tapPromise is not supported on a SyncHook");
};

const COMPILE = function(options) {
	factory.setup(this, options);
	return factory.create(options);
};

function SyncHook(args = [], name = undefined) {
	const hook = new Hook(args, name);
	hook.constructor = SyncHook;
	hook.tapAsync = TAP_ASYNC;
	hook.tapPromise = TAP_PROMISE;
	hook.compile = COMPILE;
	return hook;
}

SyncHook.prototype = null;

module.exports = SyncHook;

代码不多，但我们重点看导出的这个 SyncHook 是一个函数，也就是说我们使用的时候 new SyncHook 会执行一遍 SyncHook 函数体的内容。

在函数体中做的事情也非常简单

new 了一个 Hook，最后将这个 hook 返回出去
重写 hook 上的异步方法，因为 SyncHook 没有异步的方法
重写了 hook 上的 compile

那我们实际调用 tap、call 方法，实际上是来自于 Hook 这个类的身上，接下来就去看看这个类

Hook.js

lib/Hook.js

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
"use strict";

const util = require("util");

const deprecateContext = util.deprecate(() => {},
"Hook.context is deprecated and will be removed");

const CALL_DELEGATE = function(...args) {
	this.call = this._createCall("sync");
	return this.call(...args);
};
const CALL_ASYNC_DELEGATE = function(...args) {
	this.callAsync = this._createCall("async");
	return this.callAsync(...args);
};
const PROMISE_DELEGATE = function(...args) {
	this.promise = this._createCall("promise");
	return this.promise(...args);
};

class Hook {
	constructor(args = [], name = undefined) {
		this._args = args;
		this.name = name;
		this.taps = [];
		this.interceptors = [];
		this._call = CALL_DELEGATE;
		this.call = CALL_DELEGATE;
		this._callAsync = CALL_ASYNC_DELEGATE;
		this.callAsync = CALL_ASYNC_DELEGATE;
		this._promise = PROMISE_DELEGATE;
		this.promise = PROMISE_DELEGATE;
		this._x = undefined;

		this.compile = this.compile;
		this.tap = this.tap;
		this.tapAsync = this.tapAsync;
		this.tapPromise = this.tapPromise;
	}

	compile(options) {
		throw new Error("Abstract: should be overridden");
	}

	_createCall(type) {
		return this.compile({
			taps: this.taps,
			interceptors: this.interceptors,
			args: this._args,
			type: type
		});
	}

	_tap(type, options, fn) {
		if (typeof options === "string") {
			options = {
				name: options.trim()
			};
		} else if (typeof options !== "object" || options === null) {
			throw new Error("Invalid tap options");
		}
		if (typeof options.name !== "string" || options.name === "") {
			throw new Error("Missing name for tap");
		}
		if (typeof options.context !== "undefined") {
			deprecateContext();
		}
		options = Object.assign({ type, fn }, options);
		options = this._runRegisterInterceptors(options);
		this._insert(options);
	}

	tap(options, fn) {
		this._tap("sync", options, fn);
	}

	tapAsync(options, fn) {
		this._tap("async", options, fn);
	}

	tapPromise(options, fn) {
		this._tap("promise", options, fn);
	}

	_resetCompilation() {
		this.call = this._call;
		this.callAsync = this._callAsync;
		this.promise = this._promise;
	}

	_insert(item) {
		this._resetCompilation();
    ...
		this.taps[i] = item;
	}
}

Object.setPrototypeOf(Hook.prototype, null);

module.exports = Hook;

在初始化 Hook 的时候，会被带上很多属性，比如_x、taps等等，这些属性用到了再聊。

在我们实际调用 tap 注册事件函数的时候，实际调用的是 _tap。当然，像 tapAsync，tapPromise 也是调用的 _tap，只不过传入的 type 不一样。

_tap(type, options, fn) {
  if (typeof options === "string") {
    options = {
      name: options.trim()
    };
  } else if (typeof options !== "object" || options === null) {
    throw new Error("Invalid tap options");
  }
  if (typeof options.name !== "string" || options.name === "") {
    throw new Error("Missing name for tap");
  }
  if (typeof options.context !== "undefined") {
    deprecateContext();
  }
  options = Object.assign({ type, fn }, options);
  options = this._runRegisterInterceptors(options);
  this._insert(options);
}

重点看_tap，会将 options 组装一次，变成符合 _insert 要求的格式，最后调用了_insert。

_insert(item) {
  this._resetCompilation();
  ...
  this.taps.push(item)
}

_insert我省去了一部分逻辑，重点看最后就是将 options push 进 taps 中了，还有一个逻辑是 _resetCompilation，这个之后会提。

那我们看到这里，tap 做的事情其实非常的简单，就是将组装好的事件 options 推入一个队列中。

接下来我们看调用 call 发生了什么事情。

call

在调用call的时候，会调用 Hook 这个类的call 方法，在 Hook 被初始化的时候，call 方法就会被初始化，并且赋值为CALL_DELEGATE

const CALL_DELEGATE = function(...args) {
	this.call = this._createCall("sync");
	return this.call(...args);
};

class Hook {
	constructor(args = [], name = undefined) {
		this._call = CALL_DELEGATE;
		this.call = CALL_DELEGATE;
	}
}

那么我们实际调用的是CALL_DELEGATE这个函数，内部通过_createCall创建一个 call 函数，然后赋值给 this.call ，最后调用这个 this.call，_createCall这个函数做的事情，就是我们之前说过的动态生成函数，那我们看看它是怎么个动态生成的。

_createCall(type) {
  return this.compile({
    taps: this.taps,
    interceptors: this.interceptors,
    args: this._args,
    type: type
  });
}

调用 Hook 中的_createCall，它会调用 compile，因为我们之前初始化 SyncHook 重写过 compile，那么我们实际调用的是 SyncHook 中的 compile

class SyncHookCodeFactory extends HookCodeFactory {
	content({ onError, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

const factory = new SyncHookCodeFactory();

const COMPILE = function(options) {
	factory.setup(this, options);
	return factory.create(options);
};

在调用 compile 中，它内部会通过 setup 去初始化，然后通过 create 创建函数，并且返回。

为什么要把 compile 在子类单独去实现呢？其实答案很明显了，为了解耦。Tapable 将重复性代码提到父类中，然后一些不同的代码，让子类去实现，这个思想值得我们学习。

在上面的代码通过 SyncHookCodeFactory 创建了 factory，但是 SyncHookCodeFactory 又继承于 HookCodeFactory，这里为什么这样做，其实和 SyncHook 与 Hook 的关系是一样的。都是为了解耦。

那么也就调用到了 HookCodeFactory 中的 setup，并且通过 create 创建函数

HookCodeFactory

class HookCodeFactory {
	constructor(config) {
		this.config = config;
		this.options = undefined;
		this._args = undefined;
	}

	create(options) {
		this.init(options);
		let fn;
		switch (this.options.type) {
			case "sync":
				fn = new Function(
					this.args(),
					'"use strict";\n' +
						this.header() +
						this.contentWithInterceptors({
							onError: err => `throw ${err};\n`,
							onResult: result => `return ${result};\n`,
							resultReturns: true,
							onDone: () => "",
							rethrowIfPossible: true
						})
				);
				break;
			case "async":
        ...
				break;
			case "promise":
        ...
				break;
		}
		this.deinit();
		return fn;
	}

	setup(instance, options) {
		instance._x = options.taps.map(t => t.fn);
	}

  init(options) {
		this.options = options;
		this._args = options.args.slice();
	}

	deinit() {
		this.options = undefined;
		this._args = undefined;
	}
}

在 setup 中，只是将每个事件函数取了出来，放在了_x这个数据中。

然后调用 create 方法，首先调用 init 方法，在 this 上初始化一些数据，最后在通过 deinit 将初始化的数据清空。

之后走 sync 这个 case

case "sync":
  fn = new Function(
    this.args(),
    '"use strict";\n' +
      this.header() +
      this.contentWithInterceptors({
        onError: err => `throw ${err};\n`,
        onResult: result => `return ${result};\n`,
        resultReturns: true,
        onDone: () => "",
        rethrowIfPossible: true
      })
  );
  break;

new Function第一个参数是参数，第二个是函数体。重点看函数体，函数体前面有一个'"use strict";\n'，然后拼接 this.header，以及 this.contentWithInterceptors 这两个函数的返回值，就形成了最终的函数

header() {
  let code = "";
  if (this.needContext()) {
    code += "var _context = {};\n";
  } else {
    code += "var _context;\n";
  }
  code += "var _x = this._x;\n";
  if (this.options.interceptors.length > 0) {
    code += "var _taps = this.taps;\n";
    code += "var _interceptors = this.interceptors;\n";
  }
  return code;
}

因为我们没有设计上下文和拦截器，这里返回的 code 就是var _context;\n var _x = this._x;\n

contentWithInterceptors

contentWithInterceptors(options) {
  if (this.options.interceptors.length > 0) {
    ...
  } else {
    return this.content(options);
  }
}

因为我们没有拦截器，所以直接执行 content 方法，但是这个 content 已经被子类重写了，所以我们调用的是子类的 content 的方法，这也就将子类的逻辑抽离了出去。

class SyncHookCodeFactory extends HookCodeFactory {
	content({ onError, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

在子类又调用了父类的callTapsSeries方法，这里是有点绕的，需要好好理解下。

callTapsSeries

class HookCodeFactory {
  // 根据this._x生成整体函数内容
  callTapsSeries({ onDone }) {
    let code = '';
    let current = onDone;
    // 没有注册的事件则直接返回
    if (this.options.taps.length === 0) return onDone();
    // 遍历taps注册的函数 编译生成需要执行的函数
    for (let i = this.options.taps.length - 1; i >= 0; i--) {
      const done = current;
      // 一个一个创建对应的函数调用
      const content = this.callTap(i, {
        onDone: done,
      });
      current = () => content;
    }
    code += current();
    return code;
  }

  // 编译生成单个的事件函数并且调用 比如 fn1 = this._x[0]; fn1(...args)
  callTap(tapIndex, { onDone }) {
    let code = '';
    // 无论什么类型的都要通过下标先获得内容
    // 比如这一步生成 var _fn[1] = this._x[1]
    code += `var _fn${tapIndex} = ${this.getTapFn(tapIndex)};\n`;
    // 不同类型的调用方式不同
    // 生成调用代码 fn1(arg1,arg2,...)
    const tap = this.options.taps[tapIndex];
    switch (tap.type) {
      case 'sync':
        code += `_fn${tapIndex}(${this.args()});\n`;
        break;
      // 其他类型不考虑
      default:
        break;
    }
    if (onDone) {
      code += onDone();
    }
    return code;
  }
  
  // 从this._x中获取函数内容 this._x[index]
  getTapFn(idx) {
    return `_x[${idx}]`;
  }
}

这一部分就是生成函数体的核心代码了，代码还是比较复杂的，但是我们这个 case 生成的代码是 easy 的。最后执行通过执行这个函数生成的代码是

var _fn0 = _x[0];
_fn0(arg1, arg2);
var _fn1 = _x[1];
_fn1(arg1, arg2);

到这，整个函数就被动态创建完成了，最后执行的就是前面之前的那个函数，也其实就是将 taps 一个个拿出来去执行，函数逻辑还是比较简单的，但是难就难在这个动态生成。

在前文我们留有一个悬念，在执行 tap 最后调用 _insert的时候会执行 _resetCompilation 这个函数，那么这个函数是为了干什么呢？

_insert(item) {
  this._resetCompilation();
  ...
  this.taps.push(item)
}

我们先看一个例子

const { SyncHook } = require('tapable')

const hooks = new SyncHook(['arg1','arg2'])

hooks.tap('flag1', () => {
    console.log(1)
})

hooks.tap('flag',() => {
    console.log(2)
})

hooks.call('arg1', 'arg2')

// 再次添加一个tap事件函数
hooks.tap('flag3', () => {
  console.log(3);
});

// 同时再次调用
hooks.call('arg1', 'arg2');

如果没有 _resetCompilation 这个函数，我们再次调用的 call 函数其实是之前那次 call 函数，也就是说 call 并没有动态生成，会出现这个 bug。那为什么会出现这个 bug 呢？因为在我们生成函数的时候，我们会将最新生成的函数放到 call 上，那么之后的代码也就是直接执行之前的 call 了。我们看看 _resetCompilation 做了什么事情帮我们避免了这个问题。

const CALL_DELEGATE = function(...args) {
	this.call = this._createCall("sync");
	return this.call(...args);
};

class Hook {
  constructor(args = [], name = undefined) {
    this._call = CALL_DELEGATE;
    this.call = CALL_DELEGATE;
  }

  _resetCompilation() {
    this.call = this._call;
    this.callAsync = this._callAsync;
    this.promise = this._promise;
  }
}

_resetCompilation 做的事情也非常简单，将 call 重置为之前的默认函数，这样就可以解决了。在我们每一次通过 tap 注册事件的时候，就会重置一次，那么我们每次调用 call 的时候，函数体都是当前最完美的函数。

总结

所以到这，我们总结下，关于 Tapable 的流程。

本质上 Tapable 就是一个发布订阅的模型，但在通知发布的时候，是通过动态编译生成一个 Function，然后根据具体的行为去执行当前这个事件的所有回调函数

reference:
https://github.com/webpack/tapable
https://juejin.cn/post/7040982789650382855